import React, {useEffect, useState} from 'react'
import {View, Text, Picker} from '@tarojs/components'
import {AtIcon, AtTag, AtPagination} from 'taro-ui'
import Taro from "@tarojs/taro";
import {getEnv} from "../../env";
import subjectStore from "../../store/subjectStore";
import './index.scss'
import {PageData, PaperResultPo} from '../../types';
import CheckIsLogin from "../../components/CheckIsLogin";


const selects = [
  "全部", "历年真题", "模拟试题", "每日一练"
]


export default CheckIsLogin(() => {
  const subjectId = subjectStore.useStore(state => state.current)?.id
  const [select, setSelect] = useState(0);
  const [page, setPage] = useState(1);
  const [pageResult, setPageResult] = useState<PageData<PaperResultPo> | null>(null)
  useEffect(() => {
    Taro.request({
      url: `${getEnv().baseUrl}/paper/result?page=${page}&pageSize=10&subjectId=${subjectId}&paperTypeId=${select}`,
      method: "GET"
    }).then(res => {
      setPageResult(res.data)
    })
  }, [page, select, subjectId])

  if (!pageResult) return null
  return <View>
    <View className='record-top wing-blank'>
      <Picker mode='selector' range={selects} onChange={(e) => {
        setSelect(parseInt(e.detail.value.toString()))
      }} value={select}
      >
        <View>
          <Text style={{marginRight: "6px"}}>{selects[select]}</Text>
          <AtIcon value='chevron-down' size='18' color='#2A2A2A' />
        </View>
      </Picker>
    </View>
    <View className='wing-blank'>
      {
        pageResult.records.map(item => <View key={item.id} className='record-box'>
          <View className='record-box-content'>
            <View className='record-box-content-title'>
              <Text>{item.paper?.paperName}</Text>
              <AtTag type='primary' circle active size='small'>{selects[item.paper?.paperTypeId ?? 1]}</AtTag>
            </View>
            <Text className='record-box-content-time'>练习时间：{item.createTime}</Text>
          </View>
          <View className='record-box-footer'>
            <View className='record-box-footer-item' onClick={() => Taro.navigateTo({
              url: `/pages/testPaperResult/index?paperResultId=${item.id}&paperName=${item.paper?.paperName}`
            })}
            >
              <AtIcon value='mail' size='20' color='#848891' />
              <Text style={{marginLeft: "6px"}}>查看报告</Text>
            </View>
            <View className='record-box-footer-item' onClick={() => Taro.navigateTo({
              url: `/pages/testPaperContent/index?paperId=${item.paperId}`
            })}
            >
              <AtIcon value='edit' size='20' color='#848891' />
              <Text style={{marginLeft: "6px"}}>再次练习</Text>
            </View>
          </View>
        </View>)
      }

    </View>
    <AtPagination total={pageResult?.total ?? 0} current={page} pageSize={10} onPageChange={(p) => setPage(p.current)} />
  </View>
})
